<template>
  <view class="notice-container">
    <u-navbar
      title="消息通知"
      
      left-icon="arrow-left"
      left-icon-color="#303133"
      bg-color="#ffffff"
      fixed
      placeholder
      @left-click="back"
    />

    <!-- 通知列表 -->
    <view class="notice-list">
      <!-- 通知项循环渲染 -->
      <view v-for="notice in notices" :key="notice.id" class="notice-item" >
        <view style="margin-bottom: 20px;">
            <view class="notice-header">
                <text class="notice-title">{{ notice.title }}</text>
            </view>
        <text class="notice-time">{{ notice.time }}</text>
        </view>
        
        <view class="notice-content">
          {{ notice.content }}
          <u-icon name="arrow-right" size="16" color="#ccc" class="arrow-icon" @click="handleNoticeClick(notice)" />
        </view>
        <view v-if="notice.state == 0" class="unread-dot"></view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onLoad, onShow, onHide, onUnload } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { getListByVo, setReady } from '@/api/notice';
// 通知数据
const notices = ref([
  // {
  //   id: 1,
  //   title: '工资发放(8月)',
  //   content: '您8月的工资单已发放成功，请前往确认。',
  //   time: '2025.09.09 23:12',
  //   unread: true,
  //   type: 'salary',
  //   month: '8'
  // },
  // {
  //   id: 2,
  //   title: '工资发放(8月)-异议回复',
  //   content: '负责人已回复您的异议，请前往查看。',
  //   time: '2025.09.09 23:12',
  //   unread: false,
  //   type: 'dispute_reply',
  //   month: '8'
  // }
]);

// 返回上一页
const back = () => {
  uni.navigateBack();
};
const getList = () => { 
  getListByVo().then(res => {
    if (res && res.code == 200) {
      notices.value = res.data.list;
    }
  })
};

// 处理通知点击
const handleNoticeClick = (notice) => {
  // console.log('点击了通知:', notice);
  if(notice.state === '0'){
	  setReady(notice.id).then(res => {
	      if (res && res.code == 200) {
	         // 点击后标记为已读
	        notice.unread = false;
			notice.state = '1';
			toPathByNoticeType(notice)
	      }
	  })
  }else{
	   toPathByNoticeType(notice)
  }
};
const toPathByNoticeType = (notice)=>{
	// 根据通知类型跳转到不同页面
	if (notice.type === '0') {
	  uni.navigateTo({
	    url: `/pages/detail/detail?id=${notice.sourceId}`
	  });
	}else if (notice.type === '1') {
		uni.navigateTo({
		  url: `/pages/my/asset`
		});
	}else if (notice.type === '2') {
			
	}
}
onShow(() => {
  getList();
})
onUnload(() => {
  // 页面卸载时，清空数据
  notices.value = [];
})
</script>

<style scoped>
	.status-bar-placeholder {
		height: 44px;
	}
.notice-container {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
}

/* 导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.nav-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

/* 通知列表 */
.notice-list {
  
  padding: 10px;
}

/* 通知项 */
.notice-item {
  background-color: #fff;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 15px;
  margin-bottom: 10px;
  position: relative;
}

.notice-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  position: relative;
}

.notice-title {
  font-size: 16px;
  font-weight: bolder;
  color: #000;
  flex: 1;
}

.notice-time {
  font-size: 13px;
}

.notice-content {
  font-size: 14px;
  color: #666;
  line-height: 20px;
  padding-right: 20px;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.arrow-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
}

.unread-dot {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ff4d4f;
}
</style>